<template>
  <div class="card2 head3">
    <el-row gutter="10">
      <el-col :span="8">
        <div
          style="border-radius: 15px"
          class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
        >
          <div class="text-center p-2 text-white border-solid border-white border-bottom-2">
            喜神
            <div class="text-xs float-right text-yellow-500" v-if="d.value.fangWei">
              {{ d.value.fangWei[0].split(':')[1].split('=')[1] }}
            </div>
          </div>

          <div class="text-center p-2" v-if="d.value.fangWei">
            <img
              :src="getbagua(d.value.fangWei[0].split(':')[1].split('=')[0])"
              style="width: 2vw; height: auto; margin: 0 auto"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div
          style="border-radius: 15px"
          class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
        >
          <div class="text-center p-2 text-white border-white border-bottom-2">
            福神
            <div class="text-xs float-right text-yellow-500" v-if="d.value.fangWei">
              {{ d.value.fangWei[3].split(':')[1].split('=')[1] }}
            </div>
          </div>

          <div class="text-center p-2" v-if="d.value.fangWei">
            <img
              :src="getbagua(d.value.fangWei[3].split(':')[1].split('=')[0])"
              style="width: 2vw; height: auto; margin: 0 auto"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div
          style="border-radius: 15px"
          class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
        >
          <div class="text-center p-2 text-white border-white border-bottom-2">
            财神
            <div class="text-xs float-right text-yellow-500" v-if="d.value.fangWei">
              {{ d.value.fangWei[4].split(':')[1].split('=')[1] }}
            </div>
          </div>

          <div class="text-center p-2" v-if="d.value.fangWei">
            <img
              :src="getbagua(d.value.fangWei[4].split(':')[1].split('=')[0])"
              style="width: 2vw; height: auto; margin: 0 auto"
            />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row gutter="10" class="mt-4">
      <el-col :span="8">
        <div
          style="border-radius: 15px"
          class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
        >
          <div class="text-center p-2 text-white border-white border-bottom-2">
            阳贵神
            <div class="text-xs float-right text-yellow-500" v-if="d.value.fangWei">
              {{ d.value.fangWei[2].split(':')[1].split('=')[1] }}
            </div>
          </div>

          <div class="text-center p-2" v-if="d.value.fangWei">
            <img
              :src="getbagua(d.value.fangWei[2].split(':')[1].split('=')[0])"
              style="width: 2vw; height: auto; margin: 0 auto"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div
          style="border-radius: 15px"
          class="padding-sm text-white margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
        >
          <el-row class="row-bg" justify="space-between">
            <el-col :span="12">
              <div class="p-1 pl-4 text-left text-red-600">日</div>
            </el-col>
            <el-col :span="12">
              <div class="p-1 pr-4 text-right text-blue-600">月</div>
            </el-col>
          </el-row>

          <el-row class="row-bg" justify="space-between">
            <el-col :span="12">
              <div class="p-1 text-sm text-center" style="font-size: 9px" v-if="d.value.fangWei">
                {{ d.value.fangWei[5].split(':')[1] }}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="p-1 text-sm text-center" style="font-size: 9px" v-if="d.value.fangWei">
                {{ d.value.fangWei[6].split(':')[1] }}
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div
          style="border-radius: 15px"
          class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
        >
          <div class="text-center p-2 text-white border-white border-bottom-2">
            阴贵神
            <div class="text-xs float-right text-yellow-500" v-if="d.value.fangWei">
              {{ d.value.fangWei[3].split(':')[1].split('=')[1] }}
            </div>
          </div>

          <div class="text-center p-2" v-if="d.value.fangWei">
            <img
              :src="getbagua(d.value.fangWei[3].split(':')[1].split('=')[0])"
              style="width: 2vw; height: auto; margin: 0 auto"
            />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row gutter="10" class="mt-4">
      <el-col :span="8">
        <div
          style="border-radius: 15px"
          class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
        >
          <div class="text-center p-2 text-white border-white border-bottom-2">
            年太岁
            <div class="text-xs float-right text-yellow-500" v-if="d.value.fangWei">
              {{ d.value.fangWei[7].split(':')[1].split('=')[1] }}
            </div>
          </div>

          <div class="text-center p-2" v-if="d.value.fangWei">
            <img
              :src="getbagua(d.value.fangWei[7].split(':')[1].split('=')[0])"
              style="width: 2vw; height: auto; margin: 0 auto"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div
          style="border-radius: 15px"
          class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
        >
          <div class="text-center p-2 text-white border-white border-bottom-2">
            月太岁
            <div class="text-xs float-right text-yellow-500" v-if="d.value.fangWei">
              {{ d.value.fangWei[8].split(':')[1].split('=')[1] }}
            </div>
          </div>

          <div class="text-center p-2" v-if="d.value.fangWei">
            <img
              :src="getbagua(d.value.fangWei[8].split(':')[1].split('=')[0])"
              style="width: 2vw; height: auto; margin: 0 auto"
            />
          </div>
        </div>
      </el-col>

      <el-col :span="8">
        <div
          style="border-radius: 15px"
          class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
        >
          <div class="text-center p-2 text-white border-white border-bottom-2">
            日太岁
            <div class="text-xs float-right text-yellow-500" v-if="d.value.fangWei">
              {{ d.value.fangWei[9].split(':')[1].split('=')[1] }}
            </div>
          </div>

          <div class="text-center p-2" v-if="d.value.fangWei">
            <img
              :src="getbagua(d.value.fangWei[9].split(':')[1].split('=')[0])"
              style="width: 2vw; height: auto; margin: 0 auto"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue';

defineProps({
  d: Object,
});

function getbagua(str) {
  // console.log('str', str)
  if (str === '乾') {
    return 'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_乾.svg';
  }
  if (str === '坤') {
    return 'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_坤.svg';
  }
  if (str === '离') {
    return 'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_离.svg';
  }
  if (str === '坎') {
    return 'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_坎.svg';
  }
  if (str === '震') {
    return 'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_震.svg';
  }
  if (str === '艮') {
    return 'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_艮.svg';
  }
  if (str === '兑') {
    return 'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_兑.svg';
  }
  if (str === '巽') {
    return 'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_巽.svg';
  }
}
</script>
<style scoped lang="less">
.head3 {
  width: 100%;
  height: 100%;

  --gap: 2em;
  --line: 1px;
  --color: rgba(255, 255, 255, 0.2);

  background-image: linear-gradient(
      -90deg,
      transparent calc(var(--gap) - var(--line)),
      var(--color) calc(var(--gap) - var(--line) + 1px),
      var(--color) var(--gap)
    ),
    linear-gradient(
      0deg,
      transparent calc(var(--gap) - var(--line)),
      var(--color) calc(var(--gap) - var(--line) + 1px),
      var(--color) var(--gap)
    );
  background-size: var(--gap) var(--gap);
}
</style>
